<template>
  <figure class="tab-container">
    <el-tag v-for="tag in tags" :key="tag.id" :type="tag.type" style="margin:5px" @click="handleClick(tag)"
            size="small" effect="plain">
      <div v-if="tag.name=='首页' && tag.id=='index'" >
        {{ tag.name }}
      </div>
      <div v-else>
        {{ tag.name }}<i class="el-icon-close" @click="handleClose(tag)"></i>
      </div>
    </el-tag>
  </figure>
</template>

<script>
export default {
  name: "tagIndex",
  data() {
    return {
      tags: [{
        id: 'index',
        name: '首页',
        type: 'info',
        path: '/'
      }]
    }
  },
  created() {
    let tag = this.$store.getters.getTagVal
    if (tag != null) {
      if (this.tags[0].id != tag.id) {
        tag.type = ''
        this.tags.push(tag)
      } else {
        this.tags[0].type = ''
      }
    }
  },
  methods: {
    handleClick(tag) {
      //1、获取当前页面的地址
      let path = this.$route.path.split('/')[1]
      if(tag.path == "/" && path == "index"){
        return
      }
      //2、如果需要跳转的页面是首页
      if (path != "" && tag.path == "/") {
        this.$router.replace(tag.path)
        this.$store.commit("SET_TAGVAL", tag)
        this.$store.commit("SET_ACTIVE", tag.path)
      }
      //2、判断需要跳转的地址是不是当前页面
      if (tag.path != path && tag.path != "/") {
        //3、不是的话，就跳转页面，并修更新侧边栏的缓存、tag的缓存
        this.$store.commit("SET_TAGVAL", tag)
        this.$store.commit("SET_ACTIVE", tag.path)
        //4、跳转页面
        this.$router.replace(tag.path)
      }
    },
    handleClose(tag) {
      //1、获取当前页面的地址
      let path = this.$route.path.split('/')[1]

      //2.1 、删除的是自己的tag 首页除外
      if (tag.path == path && tag.path != "/") {
        let newTag = "";
        //3.1、如果tag是最后一个，tags的下标从0开始，所有这里-1
        if (this.tags[this.tags.length - 1].path == tag.path) {
          //当前标签的上一级标签
          newTag = this.tags[this.tags.length - 2]
          newTag.info = ''
          //移除当前标签
          this.tags.splice(this.tags.indexOf(tag), 1);
        } else {
          //3.2、不是最后一个标签，删除自己，后面标签高亮
          let index = 0;
          this.tags.forEach(function (i, ii) {
            if (i.id == tag.id) {
              console.log(i, ii)
              index = ii;
            }
          })

          if (index > 0) {
            newTag = this.tags[index + 1]
          }
        }
        //移除当前标签
        this.tags.splice(this.tags.indexOf(tag), 1);
        //更新侧边栏的缓存、tag的缓存、跳转页面
        this.$store.commit("SET_TAGVAL", newTag)
        this.$store.commit("SET_ACTIVE", newTag.path)
        this.$router.replace(newTag.path)
      } else {
        if (tag.path != "/") {
          //2.2、删除的不是自己的标签
          this.tags.splice(this.tags.indexOf(tag), 1);
        }

      }
    },
  },
  watch: {
    '$store.getters.getTagVal': function (newVal) {
      //获取当前页面的地址
      // let path = this.$route.path

      let pushFLg = true

      //1、如果tag的长度等于0 则之间加入
      if (this.tags.length == 0) {
        pushFLg = true
      } else {
        //2、循环tag，判断新tag是否存在，如果存在就不用新增了
        this.tags.forEach(function (i) {
          if (i.id == newVal.id) {
            //如果点击的是当前这个tag，就高亮显示
            i.type = ''
            pushFLg = false;
          } else {
            i.type = 'info'
          }
        })
      }
      //true 新增
      if (pushFLg) {
        newVal.type = ''
        this.tags.push(newVal)
      }
    }
  }
}
</script>

<style scoped>
.tab-container {
  margin: 0px;
  margin-right: 5px;
  text-align: left;
  border-radius: 0px;
  border-bottom: 1px solid #d8d0d0;
}

.el-tag {
  border-radius: 1px;
  cursor: pointer;
}
</style>